:deep(.cell) {
  display: flex;
  align-items: center;
}

.networks {
  box-sizing: border-box;
  margin: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  background-color: #fff;

  .title_header {
    display: flex;
    align-items: center;
    column-gap: 4px;
    height: 19px;
    line-height: 19px;
    background-color: #fff;
    padding: 12px;

    // box-sizing: border-box;
    .line {
      width: 3px;
      height: 14px;
      border-radius: 0px;
      background-color: $primaryColor;
      border: 0;
    }

    .text {
      font-size: 14px;
      line-height: 15px;
    }
  }

  .line_ {
    border-bottom: 1px dotted $dottedLine;
    //  padding: 12px 0;
    margin: 0 12px;
    background-color: #fff;
  }

  .main {
    padding: 12px;
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    box-sizing: border-box;

    .sidebar {
      width: 230px;
      position: relative;
      z-index: 9;
      height: 100%;
      margin-right: 12px;
      box-sizing: border-box;
      border-right: 1px solid #ebeef5;

      .header {
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 12px;
        padding-bottom: 10px;
      }

      .line_min {
        border-bottom: 1px dotted $dottedLine;
        //  padding: 12px 0;
        margin-right: 14px;
        background-color: #fff;
      }

      .trees_container {
        width: 216px;
        margin-top: 12px;
        display: flex;
        overflow-y: auto;
        height: calc(100% - 52px);
        flex-direction: column;
        position: absolute;
        margin-right: -3px;
        padding-right: 3px;

        &::-webkit-scrollbar-track {
          background: transparent; //背景颜色
        }

        .tree_box {
          // flex: 1;
          // padding-bottom: 50px;
          box-sizing: border-box;
        }

        .tree_item {
          width: 100%;
          height: 32px;
          box-sizing: border-box;
          padding: 0 24px;
          font-size: 12px;
          line-height: 32px;
          border-radius: 1px;
          display: flex;
          justify-content: space-between;
          color: #606266;
          cursor: pointer;

          .btn_group {
            display: flex;
            column-gap: 8px;
            align-items: center;
            //   height: 30px;
          }

          &:hover {
            background-color: #007bff23;
          }
        }

        .active_tree_item {
          color: #fff !important;
          background-color: #007cff !important
        }

        :deep(.el-tree) {
          --el-tree-node-hover-bg-color: #007bff23;

          .el-tree-node__content {
            height: 32px;
            border-radius: 2px;

            .custom-tree-node {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              box-sizing: border-box;
              height: 100%;
            }
          }

          .el-tree-node__content:has(.is_disable) {
            cursor: not-allowed;
          }

          .el-tree-node__content:has(.is_active_tree_item) {
            color: #fff !important;
            background-color: #007cff;

            .el-tree-node__expand-icon {
              color: #fff !important;
            }
          }
        }
      }
    }

    .select_header {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // row-gap: 12px;

      .btn_group {
        display: flex;
        column-gap: 5px;
      }

      :deep(.el-date-editor) {
        height: 26px;

        .el-input__wrapper {
          height: 26px;
        }
      }

      .search {
        display: flex;
        column-gap: 5px;
        flex-wrap: wrap;
        row-gap: 10px;

        :deep(.el-select) {
          width: 140px;
        }

        :deep(.el-input) {
          width: 240px;
        }
      }
    }

    .table_list {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      gap: 10px;

      .table {
        flex: 1;
        height: 100%;
        position: relative;
      }
    }


    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.body {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  .header {
    .btn_group {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .search {
      display: flex;
      gap: 5px;

      .net_mode,
      .net_category {
        width: 120px;

        :deep(.el-select__wrapper) {
          min-height: 28px;
          border-radius: 2px;
          font-size: 12px;
        }
      }

      .keyword {
        width: 160px;
      }

      .btn_group {
        display: flex;
        gap: 5px;

        .seatch_btn,
        .reset_btn {
          padding: 0 10px;
          border-radius: 2px;
          height: 28px;
          margin: 0;
        }
      }
    }
  }

  .table {
    margin: 0;
    // max-height: calc(100% - 80px);
    position: relative;
    flex: 1;

    .text_color {
      color: #007cff;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

:deep(.el-button--primary) {
  &:hover {
    border: none;
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.height-32px {
  height: 28px;
}

.padding-lr-4 {
  padding: 0 4px;
}

.padding-8 {
  padding: 8px;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.center {
  justify-content: center;
  align-items: center;
}

.font-12 {
  font-size: 12px;
}

.export-field-item {
  position: relative;
  cursor: pointer;

  .export-field-item-text {
    background-color: $primaryColor;
    padding: 0 10px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
  }

  .export-field-item-btn {
    width: 12px;
    height: 12px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    line-height: 10px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #fff;
    transform: translate(50%, -50%);
    background-color: #f56c6c;
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
}

.export-field-item:hover {
  .export-field-item-btn {
    opacity: 1;
  }
}

.export-and-save-btn {
  width: 4.6vw;
  border-color: rgba($color: $secondColor3, $alpha: 0.4);
  color: $secondColor3;
  background-color: rgba($color: $secondColor3, $alpha: 0.08);
}

.export-and-save-btn:hover {
  background-color: $secondColor3;
  border-color: $secondColor3;
  color: #fff;
}

.export-save {
  width: 3.2vw;
}

.export-cancel {
  width: 3.2vw;
}

.add-field-item {
  position: relative;
  cursor: pointer;

  .add-field-item-text {
    background-color: rgba($color: $primaryColor, $alpha: 0.08);
    padding: 0 10px;
    display: flex;
    height: 28px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: rgba($color: $primaryColor, $alpha: 0.8);
    border-radius: 2px;
  }

  .add-field-item-btn {
    width: 12px;
    height: 12px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 10px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background-color: #f56c6c;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    opacity: 0;
  }
}

.add-field-item:hover {
  .add-field-item-btn {
    opacity: 1;
  }
}

.el-tag.el-tag--success {
  --el-tag-text-color: #00c0c0;
  --el-tag-bg-color: #ebf6f6;
  --el-tag-border-color: #ebf6f6;
  --el-tag-hover-color: #00c0c0;
}

.el-tag.el-tag--info {
  --el-tag-border-color: var(--el-color-info-light-9);
}

.el-tag {
  --el-tag-border-color: var(--el-color-primary-light-9);
}

.el-tag.el-tag--warning {
  --el-tag-border-color: var(--el-color-warning-light-9);
}